<template>
  <form class="mui-input-group">
    <div class="mui-input-row">
      <label class="tit">收件人</label>
      <input
        v-model="form.name"
        type="text"
        class="mui-input-clear"
        placeholder="请输入收件人姓名"
      />
    </div>
    <div class="mui-input-row">
      <label class="tit">联系方式</label>
      <input
        v-model="form.tel"
        type="text"
        class="mui-input-clear"
        placeholder="请输入手机号"
      />
    </div>
    <div class="mui-input-row">
      <label class="tit">所在地区</label>
      <input
        v-model="form.area"
        type="text"
        class="mui-input-clear"
        placeholder="所在地区"
        @click="choose"
      />
      <div class="divwrap">
        <div class="mask" @click="choose" v-show="show"></div>
        <v-distpicker
          v-show="show"
          type="mobile"
          @province="onChangeProvince"
          @city="onChangeCity"
          @area="onChangeArea"
          :province="newInfo.province"
          :city="newInfo.city"
          :area="newInfo.district"
        >
        </v-distpicker>
      </div>
    </div>
    <div class="mui-input-row">
      <label class="tit">详细地址</label>
      <input
        v-model="form.detail"
        type="text"
        class="mui-input-clear"
        placeholder="请输入详细地址"
      />
    </div>
    <div class="mui-button-row">
      <button
        @click="save"
        type="button"
        class="mui-btn mui-btn-primary mui-btn-block"
      >
        确认
      </button>
      <button
        v-show="id"
        @click="del"
        type="button"
        class="mui-btn mui-btn-danger mui-btn-block"
      >
        删除
      </button>
    </div>
  </form>
</template>
  <script>
import VDistpicker from "v-distpicker";
export default {
  data() {
    return {
      form: {
        name: "",
        tel: "",
        area: "",
        detail: "",
      },
      show: false,
      newInfo: { province: "", city: "", area: "" },
    };
  },
  props: ["id"],
  created() {
    this.getAddress();
  },
  methods: {
    getAddress() {
      if (!this.id) {
        return;
      }
      this.$indicator.open({
        text: "加载中",
      });
      var params = { id: this.id };
      this.$http.get("address/edit", { params: params }).then((res) => {
        this.$indicator.close();
        if (res.data.code === 0) {
          this.$toast(res.data.msg);
        } else if (res.data.code === 1) {
          this.form = res.data.data;
        } else if (res.data.code === 2) {
          this.$router.push({ name: "login" });
        }
      });
    },
    save() {
      this.$indicator.open({
        text: "提交中",
      });
      this.form.id = this.id;
      this.$http.post("address/save", this.form).then((res) => {
        this.$indicator.close();
        if (res.data.code === 0) {
          this.$toast(res.data.msg);
        } else if (res.data.code === 1) {
          this.$toast(res.data.msg);
          this.$router.go(-1);
        } else if (res.data.code === 2) {
          this.$router.push({ name: "login" });
        }
      });
    },
    choose() {
      this.show = !this.show;
    },
    onChangeProvince(data) {
      this.newInfo.province = data.value;
    },
    onChangeCity(data) {
      this.newInfo.city = data.value;
    },
    onChangeArea(data) {
      this.newInfo.area = data.value;
      this.form.area =
        this.newInfo.province +
        "-" +
        this.newInfo.city +
        "-" +
        this.newInfo.area;
      this.show = false;
    },
    del() {
      this.$indicator.open({
        text: "删除中",
      });
      this.form.id = this.id;
      this.$http.post("address/del", this.form).then((res) => {
        this.$indicator.close();
        if (res.data.code === 0) {
          this.$toast(res.data.msg);
          0;
        } else if (res.data.code === 1) {
          this.$toast(res.data.msg);
          this.$router.go(-1);
        } else if (res.data.code === 2) {
          this.$router.push({ name: "login" });
        }
      });
    },
  },
  components: {
    "v-distpicker": VDistpicker,
  },
};
</script>
  <style lang="scss" scoped>
.mui-input-group .mui-button-row {
  height: auto;
}
.mui-input-clear {
  font-size: 14px;
}
.mui-input-group:before {
  list-style: none;
}
.mui-button-row {
  margin-top: 20px;
  button {
    margin: 20px 0;
    padding: 10px 0;
  }
}
.tit {
  color: #999;
}
input::-webkit-input-placeholder {
  color: #999;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999;
}
.divwrap > .mask {
  background: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.divwrap > .distpicker-address-wrapper {
  color: #999;
  background: #fff;
  border-top: 1px solid #ccc;
  z-index: 1;
  height: 300px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>